<template>
	<div class="flex">
		<div class="w">
			<ul>
				<li class="checked"><a href="javascript:;" class="checked_color">全部</a></li>
				<li><a href="javascript:;">待付款</a></li>
				<li><a href="javascript:;">待收货</a></li>
				<li><a href="javascript:;">待使用</a></li>
				<li><a href="javascript:;">待评价</a></li>
			</ul>
		</div>
	</div>
</template>

<script>
export default {
	name: 'UserOrderListNavigationBar',
};
</script>

<style scoped>
.flex {
	width: 100%;
	height: 70px;
	display: flex;
}
.w {
	width: 100%;
	padding-bottom: 15px;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	background-color: #fff;
}
.w:first-child {
	padding-left: 15px;
}

ul > li {
	display: inline-block;
	padding: 0 15px 0 15px;
	border-radius: 20px;
	text-align: center;
}
ul > li > a {
	font-size: 14px;
	line-height: 24px;
	color: #aaa;
}
.checked {
	background: #ffd719;
	border: 1px solid #ffd719;
	color: #fff;
}
.checked_color {
	color: #fff;
}
</style>
